import React, { useState } from "react";
import styles from "./index.module.less";
import { Outlet } from "react-router-dom";
import AsideDomin from "./asideDomin";
import { connect } from "react-redux";
import {
    isShowAddFriendBounced,
    friendItemToMainDataAction,
    showMotifyBynameCardAction,
    motifyChaterBynameAction,
} from "@redux/actions02";
import SvgIcon from "@components/SvgIcon";
import toast from "@utils/showToast";
import { useParams } from "react-router-dom";

const WebChat = (props) => {
    const {
        isShowAdd,
        friendItemToMainDataAction,
        transData,
        showMotifyBynameCardAction,
        isShowMotifyBynameCard,
        motifyChaterBynameAction,
    } = props;

    const { id } = useParams();

    const [val, setVal] = useState("");

    const motifyBynameOper = () => {
        if (!val.trim()) {
            toast.fail("新备注名称不能为空！");
            return;
        }
        motifyChaterBynameAction(transData.friend.userName, val, id);
        setVal("");
    };

    return (
        <div
            className={styles.web_chat}
            onContextMenu={(e) => {
                e.preventDefault(); // 阻止聊天项目的右击事件 不允许右击
            }}
            onClick={() => {
                if (transData.isShowCard) {
                    friendItemToMainDataAction({
                        ...transData,
                        isShowCard: false,
                    });
                }
            }}
        >
            <div
                className={styles.web_mask}
                style={{ display: isShowAdd ? "block" : "none" }}
            ></div>
            <div className={styles.web_chat_main}>
                <AsideDomin />
                <Outlet />
            </div>
            <div
                className={`${styles.motify_byname_card_wrap} ${
                    isShowMotifyBynameCard ? "" : styles.hide
                }`}
            >
                <div className={styles.motify_byname_card}>
                    <div className={styles.card_title}>
                        <div className={styles.title_icon}>
                            <SvgIcon font="icon-weixin" />
                        </div>
                        <span>当前正在修改备注名称...</span>
                    </div>
                    <p className={styles.old_name}>
                        旧的备注名：{" "}
                        <span>{transData.friend?.byname || ""}</span>
                    </p>
                    <p className={styles.edit_new_name}>
                        编辑新的备注名：
                        <br />
                        <input
                            type="text"
                            className={styles.edit_name}
                            autoComplete="off"
                            value={val}
                            onChange={(e) => {
                                setVal(e.target.value);
                            }}
                        />
                    </p>
                    <div className={styles.btns}>
                        <div
                            className={styles.confirm_motify}
                            onClick={motifyBynameOper}
                        >
                            确认修改
                        </div>
                        <div
                            className={styles.cancel}
                            onClick={() => {
                                showMotifyBynameCardAction(false);
                            }}
                        >
                            取消
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default connect(
    (state) => ({
        isShowAdd: state.isShowAddFriendBouncedReducer,
        transData: state.friendItemToMainDataReducer,
        isShowMotifyBynameCard: state.isShowMotifyBynameCardReducer,
    }),
    {
        isShowAddFriendBounced,
        friendItemToMainDataAction,
        showMotifyBynameCardAction,
        motifyChaterBynameAction,
    }
)(WebChat);
